<template>
	<div>
		<el-row :gutter="24" v-if="tableFlog">
			<el-col :span="24">
				<el-row :gutter="24">
					<el-col :span="2" style="margin-right:0px;">
						<p class="queryLabel">月结月份:</p>
					</el-col>
					<el-col :span="7">
						<el-date-picker size="small"  v-model="sel.months" format="yyyy-MM-dd" :editable=false type="month" placeholder="起始日期">
						</el-date-picker>
					</el-col>
					<el-col :span="4" style="padding-left: 0px;text-align: right">
						<el-button type="primary" size="small" v-on:click='monthlyQuery'>查询</el-button>
						<el-button type="primary" size="small" v-on:click='add'>新增月结</el-button>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;">
							<el-table-column label="仓库" prop="warehouse">
							</el-table-column>
							<el-table-column label="车系" align="center" prop="carSeries">
							</el-table-column>
							<el-table-column label="车系" align="center" prop="carModel">
							</el-table-column>
							<el-table-column label="配置" align="center" prop="configure">
							</el-table-column>
							<el-table-column label="VIN" align="center" prop="vin">
							</el-table-column>
							<el-table-column label="销售日期" align="center" prop="saleDate">
							</el-table-column>
							<el-table-column label="进价" align="center" prop="newCost">
							</el-table-column>
							<el-table-column label="估价" align="center" prop="oldCost">
							</el-table-column>
							<el-table-column label="差额" align="center" prop="mangins">
							</el-table-column>
							<el-table-column label="月份" align="center" prop="modifyDate">
							</el-table-column>
						</el-table>
						<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
						</el-pagination>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-row :gutter="24" v-if="!tableFlog">
			<el-col :span="24">
				<el-row :gutter="24">
					<el-col :span="22" style="padding-left: 0px;text-align: right">
						<el-button type="primary" icon="caret-left" size="small" v-on:click='buckList'>返回</el-button>
						<el-button type="primary" icon="caret-left" size="small" v-on:click='prientOrder'>打印</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-table :data="tableDatas.dataList" border style="width: 100%;align-content: center;">
							<el-table-column label="公司" prop="vin">
							</el-table-column>
							<el-table-column label="仓库" align="right" prop="">
							</el-table-column>
							<el-table-column label="车型" align="right" prop="">
							</el-table-column>
							<el-table-column label="配置" align="right" prop="">
							</el-table-column>
							<el-table-column label="发票金额" align="right" prop="">
							</el-table-column>
							<el-table-column label="估算金额" align="right" prop="">
							</el-table-column>
							<el-table-column label="价差" align="right" prop="">
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-dialog tittl="打印" v-model="prientShow" id="dvData" size="large">
			<div id="printHtml" style=" width: 100%;" v-if="prientShow">
				<font face="宋体">
					<el-row>
						<div id="" style="margin-left: 35%; width: 65%;">
							<font face="宋体">
								<div style="border-collapse:collapse;font-size: 20px;margin:0 auto;color:#000000">
									月末调整明细表
								</div>
							</font>
						</div>
						<div id="" style="margin-left: 0%; width: 100%; float: left;">
							&nbsp;
						</div>
						<div id="" style="margin-left: 5%; width: 30%; float: left;">
							月份：{{tableData.dataList[0].month}}月
						</div>
						<div id="" style="margin-left: 45%;float: left;">
							日期&nbsp;2017-06-21
						</div>
					</el-row>
					<el-row style="padding-left:5px; margin-top:5px">
						<el-col :span="24">
							<div>
								<table width="100%" border="1px solid #000000" cellspacing="0px" cellpadding="10px" bgcolor="#FFFFFF" style="border-collapse:collapse;font-size: 10px;margin:0 auto;color:#1F2D3D">
									<tr>
										<td width="150" colspan="1"><b>仓库</b></td>
										<td width="150" colspan="1"><b>车系</b></td>
										<td width="40"><b>车型</b></td>
										<td width="40"><b>配置</b></td>
										<td width="70"><b>底架号</b></td>
										<td width="70"><b>日期</b></td>
										<td width="70"><b>进价</b></td>
										<td width="70"><b>估价</b></td>
										<td width="70"><b>价差</b></td>
										<td width="70"><b>月份</b></td>
									</tr>
									<tr v-for="list in tableData.dataList">
										<td width="150" colspan="1"><b>{{list.warehouse}}</b></td>
										<td width="150" colspan="1"><b>{{list.carSeries}}：</b></td>
										<td width="40"><b>{{list.carModel}}</b></td>
										<td width="70"><b>{{list.configure}}</b></td>
										<td width="70"><b>{{list.vin}}</b></td>
										<td width="70"><b>{{list.seleDate}}</b></td>
										<td width="70"><b>{{list.invoicePrice}}</b></td>
										<td width="70"><b>{{list.cost}}</b></td>
										<td width="70"><b>{{list.mangins}}</b></td>
										<td width="70"><b>{{list.month}}</b></td>
									</tr>
								</table>
							</div>
						</el-col>
					</el-row>
					
				</font>
			</div>
			<el-row style="margin-left:5px">
				<el-col>
					<el-button type="primary" @click="saveDayin">点击打印</el-button>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//查询条件
				sel:{
					months:"",
				},
				//打印的表格数据
				datalist: [{
					a: "测试",
					b: "用户",
				}, {
					a: "测试2",
					b: "圆通3",
				}, {
					a: 1,
					b: 3,
				}],
				//列表与详情切换的标识
				tableFlog: true,
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,

				monthlyList: 'first',
				//公司数据
								tableData: {
									total: 0,
									dataList: []
								},
				tableDatas: {
					total: 0,
					dataList: []
				},
				condition: {
					startDate: "",
					stopDate: "",
					startDifference: "",
					stopDifference: "",
				},

				monthlyFormData: {
					month: "",
					billingDate: "",
					startDate: "",
					stopDate: "",
					billingCount: "",
					invoiceSum: "",
					costAmount: "",
					difference: "",

				},

				monthlyFormEmptyData: {
					month: "",
					billingDate: "",
					startDate: "",
					stopDate: "",
					billingCount: "",
					invoiceSum: "",
					costAmount: "",
					difference: "",
				},

				//新增页面
				addMonthlyFormShow: false,
				months:"",
				//校验规则
				Rule: {

					month: [{
						required: true,
						message: '请输入月份',
						trigger: 'blur'
					}],
					billingDate: [{
						required: true,
						message: '请输入结算日期',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请输入起始日期',
						trigger: 'blur'
					}],
					stopDate: [{
						required: true,
						message: '请输入截止日期',
						trigger: 'blur'
					}],
					billingCount: [{
						required: true,
						message: '请输入结算车辆数',
						trigger: 'blur'
					}],
					invoiceSum: [{
						required: true,
						message: '请输入发票总额',
						trigger: 'blur'
					}],
					costAmount: [{
						required: true,
						message: '请输入成本总额',
						trigger: 'blur'
					}],
					difference: [{
						required: true,
						message: '请输入差额',
						trigger: 'blur'
					}],

				},
				//打印窗口属性
				prientShow: false,
				
			}
		},
		methods: {
			//打印
			saveDayin: function() {
				debugger;
				/*调用打印接口*/
				//用 JavaScript 实现页面数据的打印 ： 主要是用到了一个 print() 函数 ， 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.print(); 打印页面上局部的数据，则可以 用
				//把数据嵌套在 一个 div 里，获得 div				
				var newstr = document.getElementById("printHtml").innerHTML;
				var printWindow = window.open();
				printWindow.document.body.innerHTML = newstr;
				printWindow.print();
				printWindow.close();
				//this.$data.dayinFormShow = false;
			},
			//打印月结单
			prientOrder: function() {

			},
			//新增月结保存
			save: function() {

			},
			//返回列表
			//返回列表
			buckList: function() {
				this.$data.tableFlog = true;
				this.companyQuery();
			},
			//查看发票详情
			info: function(index) {
				//this.$data.infoId = this.$data.tableData.dataList[index].id;
				//this.invoiceCarQuery();
				this.$data.tableFlog = false;
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.baseQuery();
			},
			//查询月结列表
			monthlyQuery: function() {
				this.$data.sel.months = this.momentFu(this.$data.sel.months);
				//this.$data.months
				this.$http.post(this.API_ROOT + '/scm/monthlyBalance/mangins', this.$data.sel,{
					params: {
						//month: this.$data.months
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData = resp.data;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {})
			},

			//新增
			add_old: function() {
				this.$data.monthlyFormData = Object.assign(this.$data.monthlyFormData, this.$data.monthlyFormEmptyData);
				this.$data.addMonthlyFormShow = true;
				this.monthlyQuery();
			},
			add: function() {
				this.$http.get(this.API_ROOT + '/scm/monthlyBalance/monthlyBalance').then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},

			//

			//时间判断为空的封装
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM");
				}
			},

		},
		created: function() {
			debugger;
			this.monthlyQuery();
			this.$data.sel.months=this.moment();
		},

	}
</script>
